<template>
  <div class="home-page">
    <h2>欢迎使用「魔芋爽的待办清单」</h2>
    <p>这是一个基于 <strong>Vue 3 + Vue Router + Pinia</strong> 开发的任务管理应用，包含以下核心功能：</p>
    <ul>
      <li>✅ 多页面路由管理（首页、记事本、关于）</li>
      <li>✅ 任务添加（支持回车快捷添加）</li>
      <li>✅ 任务删除（悬浮显示删除按钮）</li>
      <li>✅ 任务清空（二次确认防误操作）</li>
    </ul>
    <p>点击顶部导航栏，体验不同页面吧～</p>
  </div>
</template>

<script>
export default {
  name: 'HomeView'
}
</script>

<style scoped>

.home-page {
  max-width: 800px; /* 🔥 限制最大宽度（适配大屏，避免内容过宽） */
  margin: 0 auto;   /* 🔥 水平居中（左右自动留白） */
  padding: 20px;
}
h2 {
  color: #ff6b81;
  margin-bottom: 10px;
}
ul {
  list-style: disc;
  margin: 10px 0 10px 20px;
}
p {
  line-height: 1.6;
}
strong {
  color: #ff6b81;
}
</style>